<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>css讲解</title>
	<style type="text/css">
	div{ 
		width: 200px;
		height: 200px;
		background: #f00;
		border: 10px solid blue;
	 }
	/*  #dd{ 
			font-size: 24px;
			color: #fff;
	 } */
	/*   #xdd{ 
			font-size: 24px;
			color: #000;
	 } */
	   .xdd1{ 
			color: yellow;
	    }
		div h2{ 
			color: yellow;
		 }
		 a{ 
			color: #0f0;
			font-size: 24px;
		  }
		  a:hover{ /* 鼠标悬停 */
			color: #00f;
			font-size: 30px;
		   }
		   ul li{ 
			color: red;
			list-style: none;/* 去除li前面的小点 */
		    }
		    /* 匹配001 */
		    ul li:first-child{ /* 第一个子类 */
				color: blue;
		     }
		     ul h2:nth-of-type(1){ 
				color: blue;
			 }
		     ul li:last-child{ /* 最后一个子类 */
				color: #000;
		      }
		      ul li:nth-child(3){  /* 第几个子类 */
				color: #ff0;
		       }
		   /*   匹配 单数 双数 只有一个子类的  匹配类型第几个 */
		       ul li:only-child{ 
				color: pink;
		        }
	</style>
</head>
<body>
<!-- id 就是证号  不能重复 -->
	<div id="dd" class="xdd1">
		这是一块区域
	</div>
	<div id="xdd" class="xdd1">
		这是第二块区域
	</div>
	<!-- 匹配规则 -->
	<div>
		<h2>我是标题</h2>
	</div>
	<a href="https://www.baidu.com">baidu</a>
	<h2>我是标题</h2>
	<ul>
		<h2>我是老大</h2>	
		<li>001</li>
		<li>002</li>
		<li>003</li>
		<li>004</li>
		<li>005</li>
	</ul>
	<ul>
		<li>1111</li>
		<li>2222</li>
	</ul>
</body>
</html>